<template>
  <div class="app-container">
    <div class="filter-container">
      <el-select
        v-model="listQuery.channelId"
        filterable
        clearable
        :filter-method="dataFilter"
        placeholder="选择渠道"
        style="width: 150px;"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      >
        <el-option
          v-for="(item, index) in options"
          :key="index"
          :label="item.channel_name"
          :value="item.channelId"
        />
      </el-select>
      <el-select
        v-model="listQuery.appId"
        filterable
        clearable
        :filter-method="appdataFilter"
        placeholder="选择产品"
        style="width: 150px;"
        class="filter-item"
      >
        <el-option
          v-for="(item, index) in appoptions"
          :key="index"
          :label="item.appName"
          :value="item.appId"
        />
      </el-select>
      <el-input
        v-model="listQuery.area"
        clearable
        placeholder="地区"
        style="width: 200px;"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      />
      <el-button
        v-waves
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="handleFilter"
      >
        搜索
      </el-button>
      <el-button
        class="filter-item"
        style="margin-left: 10px;"
        type="success"
        icon="el-icon-plus"
        @click="handleCreate"
      >
        批量应用新增
      </el-button>
      <el-button
        class="filter-item"
        style="margin-left: 10px;"
        type="success"
        icon="el-icon-plus"
        @click="handleChannelCreate"
      >
        新增配置
      </el-button>
      <el-button
        class="filter-item"
        style="margin-left: 10px;"
        type="danger"
        @click="handleChangeAddress"
      >
        批量修改区域
      </el-button>
      <el-button
        class="filter-item"
        style="margin-left: 10px;"
        type="danger"
        @click="deleteLoan"
      >
        批量删除
      </el-button>
      <el-dialog
        :visible.sync="deleteDialogVisible"
        width="20%"
        :before-close="handleClose"
      >
        <!-- <span style="color:red">删除后无法恢复，请谨慎操作！</span> -->
        <p style="text-align: center; font-size: 18px;">确认删除吗？</p>
        <span slot="footer" class="dialog-footer">
          <el-button @click="deleteDialogVisible = false">我再想想</el-button>
          <el-button type="primary" @click="handleDelete">确认删除</el-button>
        </span>
      </el-dialog>
    </div>

    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="tableData"
      border
      fit
      highlight-current-row
      style="width: 100%;"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" align="center" />
      <el-table-column label="编号" prop="id" align="center" min-width="80">
        <template slot-scope="{ row }">
          <span>{{ row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="渠道" min-width="100" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.channelName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="图标" min-width="60" align="center">
        <template slot-scope="{ row }">
          <img :src="row.icon" alt="" style="width: 26px;height:26px" />
        </template>
      </el-table-column>
      <el-table-column label="应用" class-name="status-col" min-width="100">
        <template slot-scope="{ row }">
          {{ row.appName }}
        </template>
      </el-table-column>
      <el-table-column label="地区" class-name="status-col" min-width="200">
        <template slot-scope="{ row }">
          {{ row.region }}
        </template>
      </el-table-column>
      <el-table-column label="年龄" class-name="status-col" min-width="100">
        <template slot-scope="{ row }">
          <span v-if="row.ageMin !== null">{{ row.ageMin }}</span>
          <span v-if="row.ageMin === null">0</span>
          --
          <span v-if="row.ageMax !== null">{{ row.ageMax }}</span>
          <span v-if="row.ageMax === null">100</span>
        </template>
      </el-table-column>
      <el-table-column label="芝麻分" class-name="status-col" min-width="150">
        <template slot-scope="{ row }">
          {{ row.sesameSeedLimit }}
        </template>
      </el-table-column>
      <el-table-column label="逾期" class-name="status-col" min-width="150">
        <template slot-scope="{ row }">
          {{ row.overdueLimit }}
        </template>
      </el-table-column>
      <el-table-column label="版本" class-name="status-col" min-width="100">
        <template slot-scope="{ row }">
          <span v-if="row.version === 1">安卓</span>
          <span v-if="row.version === 2">ios</span>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" min-width="180" align="center">
        <template slot-scope="{ row }">
          {{ row.gmt }}
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        min-width="120"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="{ row }">
          <el-button type="primary" size="mini" @click="handleUpdate(row)">
            编辑
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.current"
      :limit.sync="listQuery.size"
      @pagination="loanAppRegion"
    />

    <el-dialog
      :title="textMap[dialogStatus]"
      width="800px"
      :show-close="false"
      :close-on-click-modal="false"
      :visible.sync="dialogFormVisible"
    >
      <el-form ref="dataForm" :model="loan" label-width="100px">
        <el-input v-model="loan.id" type="hidden" />
        <!-- 渠道应用 -->
        <el-form-item v-if="dialogStatus === 'create'" label="渠道">
          <el-select
            v-model="loan.channelId"
            filterable
            clearable
            :filter-method="dataFilter"
            placeholder="选择渠道"
            style="width: 200px;"
            class="filter-item"
          >
            <el-option
              v-for="(item, index1) in options"
              :key="index1"
              :label="item.channel_name"
              :value="item.channelId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          v-if="dialogStatus === 'create'"
          label="产品"
          prop="loanMin"
        >
          <MultipleSelect
            :selectOptions="appoptions"
            :mulSelectLoading="mulSelectLoading"
            placeholder="选择产品"
            type="appId"
            :mulSelecteds="loan.appIdList"
            @update:updateMultipleSelect="val => (loan.appIdList = val)"
          >
          </MultipleSelect>
        </el-form-item>
        <!-- 渠道批量 -->
        <el-form-item v-if="dialogStatus === 'create2'" label="渠道">
          <MultipleSelect
            :selectOptions="options"
            :mulSelectLoading="mulSelectLoading"
            placeholder="选择渠道"
            type="channelId"
            :mulSelecteds="loan.channelIdList"
            @update:updateMultipleSelect="val => (loan.channelIdList = val)"
          >
          </MultipleSelect>
        </el-form-item>
        <el-form-item
          v-if="dialogStatus === 'create2'"
          label="产品"
          prop="loanMin"
        >
          <el-select
            v-model="loan.appId"
            filterable
            clearable
            :filter-method="appdataFilter"
            placeholder="选择产品"
            style="width: 200px;"
            class="filter-item"
          >
            <el-option
              v-for="(item, index) in appoptions"
              :key="index"
              :label="item.appName"
              :value="item.appId"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          v-if="dialogStatus === 'update'"
          label="产品"
          prop="loanMin"
        >
          <el-select
            v-model="loan.appId"
            filterable
            clearable
            :filter-method="appdataFilter"
            placeholder="选择产品"
            style="width: 200px;"
            class="filter-item"
          >
            <el-option
              v-for="(item, index) in appoptions"
              :key="index"
              :label="item.appName"
              :value="item.appId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="屏蔽地区" prop="loanMax">
          <el-cascader
            v-model="loan.region"
            size="large"
            :props="props"
            collapse-tags
            :options="cityoptions"
            @change="handleChange"
          />
        </el-form-item>
        <el-form-item label="年龄" prop="loanMax">
          <el-input v-model="loan.ageMin" style="width: 92px;" /> --
          <el-input v-model="loan.ageMax" style="width: 92px;" />
        </el-form-item>
        <el-form-item label="芝麻分限制" prop="loanMax">
          <el-checkbox-group v-model="sesameSeedLimit">
            <el-checkbox-button
              label="600分以下"
              name="sesameSeed"
            ></el-checkbox-button>
            <el-checkbox-button
              label="600-649分"
              name="sesameSeed"
              style="margin-left: 10px; border-left: 1px solid #dcdfe6;"
            ></el-checkbox-button>
            <el-checkbox-button
              label="650-699分"
              name="sesameSeed"
              style="margin-left: 10px; border-left: 1px solid #dcdfe6;"
            ></el-checkbox-button>
            <el-checkbox-button
              label="700分以上"
              name="sesameSeed"
              style="margin-left: 10px; border-left: 1px solid #dcdfe6;"
            ></el-checkbox-button>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="逾期限制" prop="loanMax">
          <el-checkbox-group v-model="overdueLimit">
            <el-checkbox-button
              label="当前有逾期"
              name="overdueLimit"
            ></el-checkbox-button>
            <el-checkbox-button
              label="无逾期"
              name="overdueLimit"
              style="margin-left: 10px; border-left: 1px solid #dcdfe6;"
            ></el-checkbox-button>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="ios/安卓">
          <el-select
            v-model="loan.version"
            filterable
            clearable
            :filter-method="dataFilter"
            placeholder="选择version"
            style="width: 200px;"
            class="filter-item"
            @keyup.enter.native="handleFilter"
          >
            <el-option key="1" label="安卓" :value="1" />
            <el-option key="2" label="ios" :value="2" />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel()">
          取消
        </el-button>
        <el-button
          v-points="3000"
          type="primary"
          @click="
            dialogStatus === 'create'
              ? createData()
              : dialogStatus === 'create2'
              ? createChannelData()
              : updateData()
          "
        >
          确认
        </el-button>
      </div>
    </el-dialog>
    <!-- 批量修改区域弹窗 -->
    <el-dialog title="批量修改区域" :visible.sync="changeAddressDig">
      <el-form
        ref="dataForm"
        :model="loan"
        label-position="left"
        style="width: 400px; margin-left:50px;"
      >
        <el-form-item label="地区" prop="loanMax">
          <el-cascader
            v-model="loan.region"
            size="large"
            :props="props"
            collapse-tags
            :options="cityoptions"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="changeAddressDig = false">
          取消
        </el-button>
        <el-button
          v-points="3000"
          type="primary"
          @click="togetherChangeAddress"
        >
          确认
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  TextToCode,
  CodeToText,
  provinceAndCityData
} from 'element-china-area-data';
import {
  addLoanAppRegion,
  addChannelRegion,
  updateLoanAppRegion,
  loanAppRegion,
  getLoanAppList,
  mulUpdateLoanAppRegion,
  deleteByLoanIds
} from '@/api/sys';
import { getChannelIdAndNick } from '@/api/user';
import waves from '@/directive/waves'; // waves directive
import Pagination from '@/components/Pagination'; // secondary package based on el-pagination
import MultipleSelect from '@/components/MultipleSelect'; // secondary package based on el-pagination
export default {
  name: 'LoanAppRegion',
  components: { Pagination, MultipleSelect },
  directives: { waves },
  data() {
    return {
      props: { multiple: true },
      limitNum: 1,
      fileList: [],
      comment: '',
      tableData: [],
      total: 0,
      tableKey: 0,
      listQuery: {
        current: 1,
        size: 10,
        sysLabel: ''
      },
      loan: {
        id: undefined,
        appName: new Date(),
        h5: '',
        slogen: '',
        applyCount: '',
        sesameSeedLimit: '',
        overdueLimit: ''
      },
      sesameSeedLimit: [],
      overdueLimit: [],
      dialogFormVisible: false,
      changeAddressDig: false,
      dialogStatus: '',
      textMap: {
        update: '修改',
        create: '批量应用新增',
        create2: '新增'
      },
      channelIdList: [],
      mulSelectLoading: false,
      dialogPvVisible: false,
      deleteDialogVisible: false,
      pvData: [],
      optionsCopy: [],
      options: [],
      appoptionsCopy: [],
      appoptions: [],
      cityoptions: provinceAndCityData,
      selectedOptions: [],
      downloadLoading: false,
      listLoading: false,
      multipleSelection: [],
      imageUrl: ''
    };
  },
  created() {
    this.loanAppRegion(this.listQuery);
    this.getChannelIdAndNick();
    this.getLoanAppList();
  },
  methods: {
    duplicate(arr) {
      const obj = [];
      const newArr = arr.reduce(function(cur, item) {
        obj[item.assetId] ? '' : (obj[item.assetId] = true && cur.push(item));
        return cur;
      }, []);
      return newArr;
    },
    handleDelete() {
      const exlist = [];
      this.multipleSelection.forEach((element, index) => {
        exlist.push(element.id);
      });
      deleteByLoanIds({ idList: exlist }).then(res => {
        if (res.data.code === 200) {
          this.$notify({
            title: '删除',
            message: '成功',
            type: 'success'
          });
          this.deleteDialogVisible = false;
          this.loanAppRegion(this.listQuery);
        } else {
          this.$notify({
            title: '删除',
            message: '失败',
            type: 'error',
            duration: 2000
          });
        }
      });
    },
    deleteLoan(row) {
      const exlist = [];
      this.multipleSelection.forEach((element, index) => {
        exlist.push(element.id);
      });
      if (exlist.length > 0) {
        this.deleteDialogVisible = true;
      } else {
        this.$message({
          message: '请先选择产品',
          type: 'warning'
        });
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleChangeAddress() {
      this.changeAddressDig = true;
    },
    async togetherChangeAddress() {
      var region = '';
      for (let index = 0; index < this.loan.region.length; index++) {
        const element = this.loan.region[index];
        var p = CodeToText[element[0]];
        var c = CodeToText[element[1]];
        var area = '';
        if (index === this.loan.region.length - 1) {
          area = p + '-' + c;
        } else {
          area = p + '-' + c + '|';
        }
        region += area;
      }
      this.loan.region = region;
      var exlist = [];
      this.multipleSelection.forEach(element => {
        var contract = element.appId + ',' + element.channelId;
        exlist.push(contract);
      });
      var addressAll = { exlist: exlist, region: this.loan.region };
      const res = await mulUpdateLoanAppRegion(addressAll);
      this.changeAddressDig = false;
      if (res.data.code === 200) {
        this.$notify({
          title: 'Success',
          message: 'Successfully',
          type: 'success',
          duration: 2000
        });
      } else {
        this.$notify({
          title: 'Fail',
          message: 'fail',
          type: 'fail',
          duration: 2000
        });
      }
      this.loanAppRegion(this.listQuery);
    },
    dataFilter(val) {
      this.value = val;
      if (val) {
        // val存在
        this.options = this.optionsCopy.filter(item => {
          if (
            !!~item.channel_name.indexOf(val) ||
            !!~item.channel_name.toUpperCase().indexOf(val.toUpperCase())
          ) {
            return true;
          }
        });
      } else {
        // val为空时，还原数组
        this.options = this.optionsCopy;
      }
    },
    async getChannelIdAndNick() {
      const res = await getChannelIdAndNick(this.listQuery);
      res.data.data.forEach(element => {
        this.optionsCopy.push(element);
        this.options.push(element);
      });
    },
    appdataFilter(val) {
      this.value = val;
      if (val) {
        // val存在
        this.appoptions = this.appoptionsCopy.filter(item => {
          if (
            !!~item.appName.indexOf(val) ||
            !!~item.appName.toUpperCase().indexOf(val.toUpperCase())
          ) {
            return true;
          }
        });
      } else {
        // val为空时，还原数组
        this.appoptions = this.appoptionsCopy;
      }
    },
    async getLoanAppList() {
      const res = await getLoanAppList();
      res.data.data.forEach(element => {
        this.appoptionsCopy.push(element);
        this.appoptions.push(element);
      });
    },
    handleChange(value) {
      // console.log(value)
    },
    // 获取列表
    async loanAppRegion(listQuery) {
      const res = await loanAppRegion(this.listQuery);
      this.tableData = res.data.data.records;
      this.total = res.data.data.total;
    },
    handleFilter() {
      this.listQuery.current = 1;
      this.loanAppRegion(this.listQuery);
    },
    cancel() {
      this.dialogFormVisible = false;
      this.loanAppRegion();
    },
    resetTemp() {
      this.loan = {
        id: undefined,
        username: '',
        gmtDatetime: '',
        state: 0,
        sesameSeedLimit: '',
        overdueLimit: ''
      };
    },
    handleCreate() {
      this.resetTemp();
      this.dialogStatus = 'create';
      this.dialogFormVisible = true;
      this.sesameSeedLimit = [];
      this.overdueLimit = [];

      // this.getLoanAppList()
      // 刷新表单数据验证提示
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate();
      });
    },
    handleChannelCreate() {
      this.resetTemp();
      this.dialogStatus = 'create2';
      this.dialogFormVisible = true;
      // this.getChannelIdAndNick()
      this.sesameSeedLimit = [];
      this.overdueLimit = [];
      // 刷新表单数据验证提示
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate();
      });
    },
    createData() {
      const that = this;
      var region = '';
      region = this.areaDel(region);
      this.loan.region = region;
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          const newOverdueLimit = this.overdueLimit.filter(item => item);
          const newSesameSeedLimit = this.sesameSeedLimit.filter(item => item);
          this.loan.sesameSeedLimit = newSesameSeedLimit.join(',');
          this.loan.overdueLimit = newOverdueLimit.join(',');
          console.log(
            this.overdueLimit,
            this.loan.overdueLimit,
            'this.overdueLimit----'
          );
          addLoanAppRegion(this.loan).then(res => {
            if (res.data.code === 200) {
              that.$notify({
                title: 'Success',
                message: 'Successfully',
                type: 'success',
                duration: 2000
              });
              that.loanAppRegion(that.listQuery);
            } else {
              this.$notify({
                title: 'fail',
                message: 'fail',
                type: 'fail',
                duration: 2000
              });
            }
            this.dialogFormVisible = false;
          });
        }
      });
    },
    createChannelData() {
      const that = this;
      var region = '';
      region = this.areaDel(region);

      this.loan.region = region;
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          const newOverdueLimit = this.overdueLimit.filter(item => item);
          const newSesameSeedLimit = this.sesameSeedLimit.filter(item => item);
          this.loan.sesameSeedLimit = newSesameSeedLimit.join(',');
          this.loan.overdueLimit = newOverdueLimit.join(',');
          addChannelRegion(this.loan).then(res => {
            if (res.data.code === 200) {
              that.$notify({
                title: 'Success',
                message: 'Successfully',
                type: 'success',
                duration: 2000
              });
              that.loanAppRegion(that.listQuery);
            } else {
              this.$notify({
                title: '新增失败',
                message: res.data.msg,
                type: 'fail',
                duration: 3000
              });
            }
            this.dialogFormVisible = false;
          });
        }
      });
    },
    areaDel(region) {
      if (this.loan.region && this.loan.region.length > 0) {
        for (let index = 0; index < this.loan.region.length; index++) {
          const element = this.loan.region[index];
          var p = CodeToText[element[0]];
          var c = CodeToText[element[1]];
          var area = '';
          if (index === this.loan.region.length - 1) {
            area = p + '-' + c;
          } else {
            area = p + '-' + c + '|';
          }
          region += area;
        }
      }
      return region;
    },
    async handleUpdate(row) {
      this.loan = row;
      // this.getLoanAppList()
      var region = [];
      if (row.region.length === 0) {
        region = '';
      } else {
        region = row.region.split('|');
      }
      var area = [];
      for (let index = 0; index < region.length; index++) {
        const element = region[index];
        if (element.indexOf('undefined') !== -1) {
          // console.log(1)
          this.loan.region = '';
        }
      }
      // console.log(this.loan)

      if (row.region === '' || row.region === null) {
        this.loan.region = '';
      } else if (region.length === 1) {
        // var index = region[0].indexOf('省') + 1
        var p = region[0].split('-')[0];
        var c = region[0].split('-')[1];
        // var p = region[0].substring(0, index)
        // var c = region[0].substring(index, region[0].length)
        var pCode = TextToCode[p].code;
        var cCode = TextToCode[p][c].code;
        var code = [pCode, cCode];
        area.push(code);
      } else {
        for (let i = 0; i < region.length; i++) {
          // var index1 = region[i].indexOf('省') + 1
          // var p1 = region[i].substring(0, index1)
          // var c1 = region[i].substring(index1, region[0].length)
          var p1 = region[i].split('-')[0];
          var c1 = region[i].split('-')[1];
          var pCode1 = TextToCode[p1].code;
          var cCode1 = TextToCode[p1][c1].code;
          var code1 = [];
          code1.push(pCode1);
          code1.push(cCode1);
          area.push(code1);
        }
      }

      this.loan.region = area;
      this.loan.sesameSeedLimit = row.sesameSeedLimit;
      this.loan.overdueLimit = row.overdueLimit;
      this.sesameSeedLimit =
        row.sesameSeedLimit == null ? [] : row.sesameSeedLimit.split(',');
      this.overdueLimit =
        row.overdueLimit == null ? [] : row.overdueLimit.split(',');
      console.log(row.sesameSeedLimit, this.loan.sesameSeedLimit, '--');
      this.dialogStatus = 'update';
      this.dialogFormVisible = true;
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate();
      });
    },
    updateData() {
      const that = this;
      var uregion = '';
      for (let index = 0; index < this.loan.region.length; index++) {
        const element = this.loan.region[index];
        var p = CodeToText[element[0]];
        var c = CodeToText[element[1]];
        var area = '';
        if (index === this.loan.region.length - 1) {
          area = p + '-' + c;
        } else {
          area = p + '-' + c + '|';
        }
        uregion += area;
      }
      this.loan.region = uregion;
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          const newOverdueLimit = this.overdueLimit.filter(item => item);
          const newSesameSeedLimit = this.sesameSeedLimit.filter(item => item);

          this.loan.sesameSeedLimit = newSesameSeedLimit.join(',');
          this.loan.overdueLimit = newOverdueLimit.join(',');

          updateLoanAppRegion(this.loan).then(res => {
            if (res.data.code === 200) {
              that.$notify({
                title: 'Success',
                message: 'Update Successfully',
                type: 'success',
                duration: 2000
              });
              that.loanAppRegion(that.listQuery);
            } else {
              that.$notify({
                title: '更新失败',
                message: res.data.msg,
                type: 'fail',
                duration: 2000
              });
            }
            this.dialogFormVisible = false;
          });
        }
      });
    },
    updateState(row) {
      if (row.state === 0) {
        row.state = 1;
      } else {
        row.state = 0;
      }
      updateLoanAppRegion(row).then(res => {
        if (res.data.code === 200) {
          this.$notify({
            title: 'Success',
            message: 'Update Successfully',
            type: 'success',
            duration: 2000
          });
          this.loanAppRegion(this.listQuery);
        } else {
          this.$notify({
            title: 'fail',
            message: 'Update fail',
            type: 'fail',
            duration: 2000
          });
        }
        this.dialogFormVisible = false;
      });
    },
    getSortClass: function(key) {
      const sort = this.listQuery.sort;
      return sort === `+${key}` ? 'ascending' : 'descending';
    }
  }
};
</script>

<style scoped>
.pic {
  width: 150px;
  margin-top: 10px;
  margin-left: 10px;
}
.ok {
  margin-left: 10px;
  margin-top: 10px;
  font-weight: 5 00;
  color: rgb(35, 248, 124);
}
.fail {
  margin-left: 10px;
  margin-top: 10px;
  font-weight: 5 00;
  color: rgb(240, 174, 76);
}
.info {
  margin-left: 10px;
  margin-top: 10px;
  font-weight: 5 00;
}
.info-name {
  margin-left: 50px;
  margin-top: 10px;
  color: rgb(172, 176, 177);
}
.title {
  margin-top: 10px;
  margin-left: 10px;
  font-size: 20px;
  font-weight: 400;
}
.box {
  margin-top: 10px;
  width: 100%;
  border: solid rgb(138, 219, 230) 2px;
}
.nick {
  font-size: 30px;
  font-weight: 600;
}
.link-top {
  margin-left: 10px;
  margin-top: 10px;
  width: 100%;
  height: 2px;
  border-top: solid rgb(138, 219, 230) 2px;
}
.link-title {
  margin-left: 10px;
  margin-top: 10px;
  width: 80px;
  height: 2px;
  border-top: solid rgb(172, 176, 177) 2px;
}
.edit-input {
  padding-right: 100px;
}
.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}
avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
